<template>
  <ContentWrap>
    <CardTitle title="eSearchForm 高级搜索表单组件" />
    
    <div class="demo-section">
      <h3>基础使用</h3>
      <p>eSearchForm 是一个功能强大的搜索表单组件，支持多种输入类型和高级筛选功能。</p>
      <code class="code-block mt-10px">
        &lt;eSearchForm 
          :columns="columns" 
          @search="handleSearch" 
          title="查询条件"
          uniqueKey="demo-search-form"
        /&gt;
      </code>
    </div>

    <CardTitle title="演示示例" />
    
    <!-- 基础示例 -->
    <div class="demo-section">
      <h4>1. 基础搜索表单</h4>
      <eSearchForm
        ref="basicSearchRef"
        :columns="basicColumns"
        @search="handleBasicSearch"
        :getSettingFunc="getListSetting"
        :saveSettingFunc="saveListSetting"
        @reset="handleReset"
        title="基础查询条件"
        uniqueKey="basic-search-demo"
      />
      <div class="result-display">
        <p><strong>搜索结果：</strong></p>
        <pre>{{ JSON.stringify(basicSearchResult, null, 2) }}</pre>
      </div>
    </div>

    <!-- 高级示例 -->
    <div class="demo-section">
      <h4>2. 高级搜索表单（包含所有输入类型）</h4>
      <eSearchForm
        ref="advancedSearchRef"
        :columns="advancedColumns"
        @search="handleAdvancedSearch"
        @reset="handleAdvancedReset"
        :getSettingFunc="getListSetting"
        :saveSettingFunc="saveListSetting"
        title="高级查询条件"
        uniqueKey="advanced-search-demo"
        :searchPermission="['demo:search']"
        :showCollapse="true"
      />
      <div class="result-display">
        <p><strong>高级搜索结果：</strong></p>
        <pre>{{ JSON.stringify(advancedSearchResult, null, 2) }}</pre>
      </div>
    </div>

    <!-- 远程选择示例 -->
    <div class="demo-section">
      <h4>3. 远程选择组件示例</h4>
      <eSearchForm
        ref="remoteSearchRef"
        :columns="remoteColumns"
        :getSettingFunc="getListSetting"
        :saveSettingFunc="saveListSetting"
        @search="handleRemoteSearch"
        @reset="handleRemoteReset"
        title="远程选择查询"
        uniqueKey="remote-search-demo"
      />
      <div class="result-display">
        <p><strong>远程搜索结果：</strong></p>
        <pre>{{ JSON.stringify(remoteSearchResult, null, 2) }}</pre>
      </div>
    </div>

    <CardTitle title="属性说明" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>属性名</th>
          <th>类型</th>
          <th>默认值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>title</td>
          <td>String</td>
          <td>'查询条件'</td>
          <td>搜索表单标题</td>
        </tr>
        <tr>
          <td>columns</td>
          <td>Array</td>
          <td>[]</td>
          <td>列配置数组，定义搜索字段</td>
        </tr>
        <tr>
          <td>uniqueKey</td>
          <td>String</td>
          <td>''</td>
          <td>唯一标识，用于保存筛选设置</td>
        </tr>
        <tr>
          <td>showCollapse</td>
          <td>Boolean</td>
          <td>true</td>
          <td>是否显示展开/收起按钮</td>
        </tr>
        <tr>
          <td>searchPermission</td>
          <td>Array</td>
          <td>[]</td>
          <td>搜索按钮权限控制</td>
        </tr>
      </tbody>
    </table>

    <CardTitle title="列配置 (columns) 说明" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>属性名</th>
          <th>类型</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>prop</td>
          <td>String</td>
          <td>字段名称</td>
        </tr>
        <tr>
          <td>label</td>
          <td>String</td>
          <td>显示标签</td>
        </tr>
        <tr>
          <td>isFilter</td>
          <td>Boolean</td>
          <td>是否显示在查询条件中</td>
        </tr>
        <tr>
          <td>filterConfig</td>
          <td>Object</td>
          <td>筛选配置对象</td>
        </tr>
      </tbody>
    </table>

    <CardTitle title="filterConfig 配置说明" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>类型 (type)</th>
          <th>说明</th>
          <th>支持的配置</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>input</td>
          <td>文本输入框</td>
          <td>placeholder, defaultOperator</td>
        </tr>
        <tr>
          <td>select</td>
          <td>下拉选择框</td>
          <td>placeholder, options, multiple</td>
        </tr>
        <tr>
          <td>remoteSelect</td>
          <td>远程搜索选择框</td>
          <td>placeholder, showFiled, queryApi, remoteType</td>
        </tr>
        <tr>
          <td>date</td>
          <td>日期选择器</td>
          <td>placeholder, dateType, format, valueFormat</td>
        </tr>
        <tr>
          <td>dateRange</td>
          <td>日期范围选择器</td>
          <td>valueFormat</td>
        </tr>
        <tr>
          <td>switch</td>
          <td>开关组件</td>
          <td>activeValue, inactiveValue</td>
        </tr>
      </tbody>
    </table>

    <CardTitle title="事件说明" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>事件名</th>
          <th>参数</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>search</td>
          <td>searchParams: Object</td>
          <td>搜索时触发，返回搜索参数</td>
        </tr>
        <tr>
          <td>reset</td>
          <td>-</td>
          <td>重置时触发</td>
        </tr>
      </tbody>
    </table>
  </ContentWrap>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getListSetting, saveListSetting } from '../api/system/user'

// 搜索结果
const basicSearchResult = ref({})
const advancedSearchResult = ref({})
const remoteSearchResult = ref({})

// 基础列配置
const basicColumns = reactive([
  {
    label: '姓名',
    prop: 'name',
    isFilter: true,
    filterConfig: { 
      solt:true,
      type: 'input', 
      placeholder: '请输入姓名', 
      defaultOperator: 'like' 
    }
  },
  {
    label: '状态',
    prop: 'status',
    isFilter: true,
    filterConfig: {
      type: 'select',
      placeholder: '请选择状态',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    }
  },
  {
    label: '创建日期',
    prop: 'createDate',
    isFilter: true,
    filterConfig: {
      type: 'date',
      placeholder: '请选择日期',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD'
    }
  }
])

// 高级列配置
const advancedColumns = reactive([
  {
    label: '用户编号',
    prop: 'userCode',
    isFilter: true, 
    filterConfig: { 
      type: 'input', 
      placeholder: '请输入用户编号', 
      defaultOperator: 'eq' 
    }
  },
  {
    label: '用户名称',
    prop: 'userName',
    isFilter: true,
    filterConfig: { 
      type: 'input', 
      placeholder: '请输入用户名称', 
      defaultOperator: 'like' 
    }
  },
  {
    label: '部门',
    prop: 'deptIds',
    isFilter: true,
    filterConfig: {
      type: 'select',
      multiple: true,
      placeholder: '请选择部门',
      options: [
        { label: '技术部', value: 'tech' },
        { label: '产品部', value: 'product' },
        { label: '运营部', value: 'operation' },
        { label: '市场部', value: 'market' }
      ]
    }
  },
  {
    label: '用户类型',
    prop: 'userType',
    isFilter: true,
    filterConfig: {
      type: 'select',
      placeholder: '请选择用户类型',
      options: [
        { label: '普通用户', value: 'normal' },
        { label: '管理员', value: 'admin' },
        { label: '超级管理员', value: 'super' }
      ]
    }
  },
  {
    label: '是否启用',
    prop: 'isEnabled',
    isFilter: true,
    filterConfig: {
      type: 'switch',
      activeValue: 1,
      inactiveValue: 0,
      hiddenFilter: true
    }
  },
  {
    label: '注册日期',
    prop: 'registerDateRange',
    isFilter: true,
    filterConfig: {
      type: 'dateRange',
      placeholder: '请选择注册日期范围',
      valueFormat: 'YYYY-MM-DD'
    }
  },
  {
    label: '最后登录',
    prop: 'lastLoginDate',
    isFilter: true,
    filterConfig: {
      type: 'date',
      placeholder: '请选择最后登录日期',
      dateType: 'datetime',
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss'
    }
  },
  {
    label: '年龄范围',
    prop: 'ageRange',
    isFilter: true,
    filterConfig: {
      type: 'input',
      placeholder: '请输入年龄范围',
      defaultOperator: 'range'
    }
  }
])

// Mock API 函数
const mockDeptApi = async (params:any) => {
  const keyword = params.condition
  await new Promise(resolve => setTimeout(resolve, 500))
 return new Promise((resolve) => {
  const depts = [
    { deptCode: 'D001', deptName: '技术研发部' },
    { deptCode: 'D002', deptName: '产品设计部' },
    { deptCode: 'D003', deptName: '市场营销部' },
    { deptCode: 'D004', deptName: '人力资源部' }
  ]
  const result = depts.filter(dept => 
    dept.deptName.includes(keyword) || dept.deptCode.includes(keyword)
  )
  resolve(result)
 })
}

const mockUserApi = async (params: {condition: string}) => {
  const keyword = params.condition
  
  await new Promise(resolve => setTimeout(resolve, 300))
  return new Promise((resolve) => {
  const users = [
    { userId: 'U001', userName: '张三' },
    { userId: 'U002', userName: '李四' },
    { userId: 'U003', userName: '王五' },
    { userId: 'U004', userName: '赵六' }
  ]
    const result = users.filter(user => 
      user.userName.includes(keyword) || user.userId.includes(keyword)
    )
    debugger
    resolve(result)
  })
}

// 远程选择列配置
const remoteColumns = reactive([
  {
    label: '所属部门',
    prop: 'deptCode',
    isFilter: true,
    filterConfig: {
      placeholder: '请选择部门',
      type: 'remoteSelect',
      showFiled: ['deptCode', 'deptName'],
      queryApi: mockDeptApi,
      idKey:'deptCode',
      isLoadMore: true,
      limit: 10,
      attrs: {
        type: 'dept' 
      }
    }
  },
  {
    label: '负责人',
    prop: 'managerId',
    isFilter: true,
    filterConfig: {
      type: 'remoteSelect',
      placeholder: '请选择负责人',
      showFiled: ['userId', 'userName'],
      queryApi: mockUserApi,
      fetchValueApi: mockUserApi,
      idKey:'userId',
      attrs: {
        type: 'user',
      }
    }
  },
  {
    label: '项目类型',
    prop: 'projectType',
    isFilter: true,
    filterConfig: {
      type: 'select',
      placeholder: '请选择项目类型',
      hiddenFilter: true,
      options: [
        { label: 'Web应用', value: 'web' },
        { label: '移动应用', value: 'mobile' },
        { label: '桌面应用', value: 'desktop' }
      ]
    }
  }
])

// 事件处理函数
const handleBasicSearch = (params: any) => {
  console.log('基础搜索参数:', params)
  basicSearchResult.value = params
}

const handleAdvancedSearch = (params: any) => {
  console.log('高级搜索参数:', params)
  advancedSearchResult.value = params
}

const handleRemoteSearch = (params: any) => {
  console.log('远程搜索参数:', params)
  remoteSearchResult.value = params
}

const handleReset = () => {
  console.log('重置基础搜索')
  basicSearchResult.value = {}
}

const handleAdvancedReset = () => {
  console.log('重置高级搜索')
  advancedSearchResult.value = {}
}

const handleRemoteReset = () => {
  console.log('重置远程搜索')
  remoteSearchResult.value = {}
}
</script>

<style scoped>
.demo-section {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}

.demo-section h4 {
  margin-bottom: 15px;
  color: #303133;
  font-weight: 600;
}

.code-block {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
}

.result-display {
  margin-top: 15px;
  padding: 15px;
  background: #f0f9ff;
  border: 1px solid #b3e5fc;
  border-radius: 4px;
}

.result-display pre {
  margin: 10px 0 0 0;
  font-size: 12px;
  color: #2563eb;
  max-height: 200px;
  overflow-y: auto;
}

.properties-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.properties-table th,
.properties-table td {
  border: 1px solid #e4e7ed;
  padding: 12px;
  text-align: left;
}

.properties-table th {
  background: #f5f7fa;
  font-weight: 600;
  color: #303133;
}

.properties-table td {
  color: #606266;
}

.properties-table code {
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}
</style>
